<template>
  <div id="app">
    <!-- <success v-if="close" @buyColse="buyColse"></success> -->
    <header class="maxHome">
      <div :class="{'header-bottom': true, 'other-type' : otherType}">
        <div class="container">
          <el-menu
            :default-active="$route.path"
            class="el-menu-demo"
            mode="horizontal"
            style="border-bottom: 0px;"
            background-color="rgba(255, 255, 255, 0)"
            text-color="#fff"
            :router="true"
            active-text-color="#ffd04b"
          >
            <el-menu-item @click="$router.push({path:'/'})" style="margin-right:50px">
              <img src="./assets/images/logo.png" style="width:100px" alt />
              <!-- <span
                class="MORGAN"
                style="padding: 0px 10px;
                                  font-size: 18px; 
                                  font-weight: 700;"
              >DUPONT</span>-->
            </el-menu-item>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item v-if="show==1" index="/mainLeft">交易</el-menu-item>
            <el-menu-item v-if="show==2" index="/login">交易</el-menu-item>
            <div
              v-if="show==1"
              style="display: flex;justify-content: center;align-items: center;"
              class="right-box normal"
             >
              <!-- <el-menu-item index="/asset">资产</el-menu-item> -->
              <el-submenu class="userName" index="22">
                <template slot="title">
                  <p style="padding:19px 21px 0 0;">资产</p>
                </template>
                <el-menu-item>
                  <img src="./assets/images/home/shoucang.png" alt />
                  <a style="color:#fff;" :href="'https://view.dupont-ex.com/KYing/income/incomewx?cusid=' + JSON.parse(mainUser).Customer.loginId + '&cussign=' + $md5('cusappsid='+JSON.parse(mainUser).Customer.loginId + '&key=i0qeQ6-3IISHUbAvd6yoFGdQTVDODvGk').toUpperCase()" target="_blank" rel="noopener noreferrer">充值</a>
                </el-menu-item>
                <el-menu-item>
                  <img src="./assets/images/home/shoucang.png" alt />
                  <a style="color:#fff;" :href="'https://view.dupont-ex.com/KYing/income/applywx?cusid=' + JSON.parse(mainUser).Customer.loginId + '&cussign=' + $md5('cusappsid='+JSON.parse(mainUser).Customer.loginId + '&key=i0qeQ6-3IISHUbAvd6yoFGdQTVDODvGk').toUpperCase()" target="_blank" rel="noopener noreferrer">出金</a>
                </el-menu-item>
              </el-submenu>
              <el-submenu class="userName" index="10">
                <template slot="title">
                  <p style="padding:19px 21px 0 0;">订单</p>
                </template>
                <el-menu-item index="contractOrder">
                  <img src="./assets/images/home/shoucang.png" alt />
                  合约订单
                </el-menu-item>
                <el-menu-item index="yieldGold">
                  <img src="./assets/images/home/shoucang.png" alt />
                  充值记录
                </el-menu-item>
                <el-menu-item index="WithdrawMoney">
                  <img src="./assets/images/home/shoucang.png" alt />
                  出金记录
                </el-menu-item>
              </el-submenu>

              <el-submenu style="display: inline-block;" class="userName" index="2">
                <template slot="title">
                  <img src="./assets/images/account/yonghutouxiang.png" />
                  <p
                    style="display: inline-block; width:100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis"
                    class="userName"
                  >{{ JSON.parse(mainUser).Customer.name }}</p>
                </template>
                <el-menu-item>
                  <img src="./assets/images/home/shoucang.png" />
                  {{ JSON.parse(mainUser).Customer.name}}，您好
                </el-menu-item>
                <el-menu-item index="account">
                  <img src="./assets/images/home/shoucang.png" alt />
                  账户安全
                </el-menu-item>
                <el-menu-item index="2-1" @click="LogOut">
                  <img src="./assets/images/home/shoucang.png" alt />
                  退出
                </el-menu-item>
              </el-submenu>
              <el-submenu style="display: inline-block;" class="userName" index="3">
                <template slot="title">
                  <img src="./assets/images/home/xiaoxi.png" alt />
                </template>
                <!-- <el-menu-item index="Notice">
                  <img src="./assets/images/home/gonggao.png" alt />
                  公告
                </el-menu-item> -->
                <el-menu-item index="aboutus">
                  <img src="./assets/images/home/gonggao.png" alt />
                  关于我们
                </el-menu-item>
              </el-submenu>
              <router-link class="route" tag="span" to="/help">
                <img style="display:flex;" src="./assets/images/home/bangzhu.png" alt />
              </router-link>

              <!-- <el-dropdown trigger="click">
                <span style="color:#ffffff" class="el-dropdown-link">语言</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="tabCh">中文</el-dropdown-item>
                  <el-dropdown-item @click.native="tabEn">English</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
            </div>

            <!-- 未登录 -->
            <div v-if="show==2" class="right-box normal">
              <router-link class="route" tag="span" to="/login">登录</router-link>
              <router-link class="route" tag="span" to="/register">注册</router-link>
              <el-submenu style="display: inline-block;" class="userName" index="3">
                <template slot="title">
                  <img src="./assets/images/home/xiaoxi.png" alt />
                </template>
                <!-- <el-menu-item index="Notice">
                  <img src="./assets/images/home/gonggao.png" alt />
                  公告
                </el-menu-item> -->
              </el-submenu>
              <router-link class="route" tag="span" to="/help">
                <img src="./assets/images/home/bangzhu.png" alt />
              </router-link>

              <!-- <el-dropdown trigger="click">
                <span class="el-dropdown-link">语言</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="tabCh">中文</el-dropdown-item>
                  <el-dropdown-item @click.native="tabEn">English</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
            </div>
          </el-menu>
        </div>
      </div>
    </header>
    <router-view></router-view>
    <footer>
      <div class="container">
        <ul  v-if="$store.state.user">
          <li>
            <p>{{$t('message.trading')}}</p>
            <router-link to="/trading" tag="p">
              牌照
            </router-link>
             <!-- <p>{{$t('message.trading')}}</p> -->
            <a style="color:#999;" href="https://www.dupont-ex.com/pdf/produceIntroduction.pdf">产品说明</a>
          </li>
          <li>
            <p>资产</p>
            <router-link to="/myAssets" tag="p">资金安全</router-link>
          </li>
          <li>
            <p>{{$t('message.Help')}}</p>
            <router-link to="/help" tag="p">{{$t('message.Helpcenter')}}</router-link>
          </li>
        </ul>
        <ul v-if="!$store.state.user">
          <li>
            <router-link to="/trading" tag="p">
              {{$t('message.trading')}}
            </router-link>
            <a style="color:#999;" href="https://www.dupont-ex.com/pdf/produceIntroduction.pdf">产品说明</a>
            <!-- <router-link to="/aboutus" tag="p">关于我们</router-link> -->
          </li>
          <li>
            
            <router-link to="/myAssets" tag="p">{{$t('message.asset')}}</router-link>
            <!-- <p><a style="color:#999;" :href="'https://view.dupont-ex.com/KYing/income/incomewx?cusid=' + JSON.parse(mainUser).Customer.loginId + '&cussign=' + $md5('cusappsid='+JSON.parse(mainUser).Customer.loginId + '&key=i0qeQ6-3IISHUbAvd6yoFGdQTVDODvGk').toUpperCase()" target="_blank" rel="noopener noreferrer">充值</a></p>
            <p><a style="color:#999;" :href="'https://view.dupont-ex.com/KYing/income/applywx?cusid=' + JSON.parse(mainUser).Customer.loginId + '&cussign=' + $md5('cusappsid='+JSON.parse(mainUser).Customer.loginId + '&key=i0qeQ6-3IISHUbAvd6yoFGdQTVDODvGk').toUpperCase()" target="_blank" rel="noopener noreferrer">出金</a></p> -->

          </li>
          <li>
            <p>{{$t('message.about')}}</p>

            <!-- <router-link to="/Notice" tag="p">{{$t('message.announcement')}}</router-link> -->
            <router-link to="/aboutus" tag="p">关于我们</router-link>
            <router-link to="/help" tag="p">{{$t('message.Helpcenter')}}</router-link>
          </li>
        </ul>
      </div>
    </footer>
  </div>
</template>
<script>
// import success from "../src/pages/daxin/success";
import { signNumberPopUp, language } from "./api/api";
import { mapState } from "Vuex";
export default {
  name: "app",
  data() {
    return {
      orLogin: window.sessionStorage.getItem("token"),
      close: false,
      account: {
        name: "186***1231"
      },
      activeIndex: "1",
      activeIndex2: "1",
      userMsg: "",
      list : ["BTCUSDT","ETHUSDT","LTCUSDT","HS300","IC500"],
      show:2
    };
  },
  created() {
    this.mainUser != null?this.show = 1:this.show = 2  
    console.log(this.mainUser,99)
    console.log(this.$store.state.user,888)
    // this.userMsg = this.$md5('cusappsid='+this.user.Customer.loginId + '&key=i0qeQ6-3IISHUbAvd6yoFGdQTVDODvGk').toUpperCase()
    // console.log(this.userMsg)
    this.getNowPrice1();
    this.getNowPrice2();
    this.getNowPrice3();
    this.getNowPrice4();
    this.getNowPrice5();
    setInterval(()=>{
    this.getNowPrice1();
    this.getNowPrice2();
    this.getNowPrice3();
    this.getNowPrice4();
    this.getNowPrice5();
    },5000)
  },

  watch:{
    $route(to,from){
      console.log(this.mainUser,999)
    },
    "mainUser"(){
      this.mainUser != null?this.show = 1:this.show = 2  
      console.log(this.show,888)
    }
  },
  computed: {
    ...mapState(["user","mainUser"]),
    countrys() {
      return localStorage.getItem("lang");
    },
    user() {
      return JSON.parse(sessionStorage.getItem("user"));
    },
    handleSelect(key, keyPath) {
      //console.log(key, keyPath);
    },
    year() {
      let date = new Date();
      let year = date.getFullYear();
      return year;
    },
    otherType() {
      return this.isRegisterPage || this.isResetPage || this.isLogin;
    },
    isRegisterPage() {
      return this.$route.path === "/register";
    },
    isLogin() {
      return this.$route.path === "/login";
    },
    isResetPage() {
      return this.$route.path === "/reset";
    }
  },
  mounted() {
  
  },
  methods: {
    tabCh() {
      if (this.$i18n.locale === "en") {
        this.$i18n.locale = "ch";
        localStorage.setItem("lang", "ch");
      }
    },
    tabEn() {
      if (this.$i18n.locale === "ch") {
        this.$i18n.locale = "en";
        localStorage.setItem("lang", "en");
      }
    },
    LogOut() {
      window.sessionStorage.clear();
      this.$store.commit("mainUser",null);
      
      this.$router.push({ path: "/login" });
    },
    // --------------------------------
    addFun(arg1, arg2) {
      var r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
    },
    
    // 获取最新价格
    getNowPrice1() {
      var that = this;
      function callbackparam(res) {}   
        $.ajax({
          type: "GET",
          url: "https://line.dupont-ex.com/getdatahis.ashx",
          contentType: "application/json",
          data: {
            symbol:that.list[0] ,
            type: "today"
          },
          async: false,
          dataType: "jsonp",
          jsonp: "callbackparam",
          success: function(data) {
            // console.log(data.TodayClosePrice);
            that.$store.commit('BTCUSDT',data.TodayClosePrice)
          }
        });
    },
    getNowPrice2() {
      var that = this;
      function callbackparam(res) {}   
        $.ajax({
          type: "GET",
          url: "https://line.dupont-ex.com/getdatahis.ashx",
          contentType: "application/json",
          data: {
            symbol:that.list[1] ,
            type: "today"
          },
          async: false,
          dataType: "jsonp",
          jsonp: "callbackparam",
          success: function(data) {
            // console.log(data.TodayClosePrice);
            that.$store.commit('ETHUSDT',data.TodayClosePrice)
          }
        });
    },
    getNowPrice3() {
      var that = this;
      function callbackparam(res) {}   
        $.ajax({
          type: "GET",
          url: "https://line.dupont-ex.com/getdatahis.ashx",
          contentType: "application/json",
          data: {
            symbol:that.list[2] ,
            type: "today"
          },
          async: false,
          dataType: "jsonp",
          jsonp: "callbackparam",
          success: function(data) {
            // console.log(data.TodayClosePrice);
            that.$store.commit('LTCUSDT',data.TodayClosePrice)
          }
        });
    },
    getNowPrice4() {
      var that = this;
      function callbackparam(res) {}   
        $.ajax({
          type: "GET",
          url: "https://line.dupont-ex.com/getdatahis.ashx",
          contentType: "application/json",
          data: {
            symbol:that.list[3] ,
            type: "today"
          },
          async: false,
          dataType: "jsonp",
          jsonp: "callbackparam",
          success: function(data) {
            // console.log(data.TodayClosePrice);
            that.$store.commit('HS300USDT',data.TodayClosePrice)
          }
        });
    },
    getNowPrice5() {
      var that = this;
      function callbackparam(res) {}   
        $.ajax({
          type: "GET",
          url: "https://line.dupont-ex.com/getdatahis.ashx",
          contentType: "application/json",
          data: {
            symbol:that.list[4] ,
            type: "today"
          },
          async: false,
          dataType: "jsonp",
          jsonp: "callbackparam",
          success: function(data) {
            // console.log(data.TodayClosePrice);
            that.$store.commit('IC500USDT',data.TodayClosePrice)
          }
        });
    }
  }
};
</script>

<style lang="scss"  scoped>
@import "./assets/css/var.css";
body .el-menu-item {
  background-color: #131f30 !important;
}
/deep/.el-menu-item:hover {
  color: #fff !important;
}
/deep/body .el-submenu__title {
  background-color: #131f30 !important;
}
/deep/body .el-submenu__title:hover {
  background-color: #333 !important;
}
.maxHome {
  min-width: 1200px;
  width: 100%;
  color: #fff;
  z-index: 9;
  background: #111d2d;
}
.login {
  border-left: 1px solid #999;
  color: #999;
  padding: 0 10px;
  line-height: 1;
  display: inline-block;
}
.userName img {
  height: 100%;
  padding: 20px;
}
.register {
  color: #999;
  padding: 0 10px;
  display: inline-block;
}

.account {
  margin-right: 10px;
}

.exit {
  cursor: pointer;
}

.new-price {
  color: var(--mainColor);
}
.header-top {
  height: var(--headerTopHeight);
  line-height: var(--headerTopHeight);
  background-color: var(--headerTopBgColor);
  padding: 0 var(--contentHorizontalPadding);
  color: #fff;
}
.listColor {
  color: #fff;
}
.header-bottom {
  background-color: rgba(255, 255, 255, 0);
  height: 60px;
  margin: 0 auto;
  width: 1200px;
  .other-type {
    height: 100px;
    .logo {
      margin-top: 15px;
    }
  }
}
.route {
  color: #999;
  margin: 0px 10px;
  display: inline-block;
}
.route:hover {
  color: #fff;
}

.right-box {
  line-height: 60px;
  float: right;
  font-size: 16px;
}
.normal {
  font-size: 14px;
}
.go-login {
  color: var(--mainColor);
}
.tel {
  font-weight: bold;
}

select {
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
}
option {
  background-color: rgba(255, 255, 255, 0);
  color: #000;
}
footer {
  background-color: #333;
  color: #999;
  padding-top: 50px;
  padding-bottom: 20px;
}

.phone-box {
  width: 384px;
  line-height: 30px;
}

.phone {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}

.link-box {
  width: 648px;
  margin-top: 15px;
  & > div {
    display: inline-block;
  }
  & a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 0 12px;
    color: #999;
    &:first-child {
      color: #fff;
    }
    &.border {
      border-right: 1px solid #999;
      &:last-child {
        border: none;
      }
    }
  }
}

.footer-top {
  height: 195px;
}

.footer-bottom {
  height: 41px;
  line-height: 41px;
  text-align: center;
  background-color: #2c2c2c;
}
footer ul {
  display: flex;
  justify-content: center;
}
footer ul li {
  float: left;
  width: 200px;
  margin: 0 auto;
}
footer ul li p {
  line-height: 30px;
}
footer ul li p:nth-child(1) {
  color: #fff;
  /* font-weight: 700; */
  font-size: 18px;
}
.erweima {
  display: block;
  margin: 15px auto;
}

.el-table_1_column_1 {
  color: #fff;
}
</style>
